<!--CBS菜单组件 -->
<template>
  <view class="entire" :class="!active ? '' : 'entire-a'">
    <view class="medal" v-if="title1 === 'DBS'">
      <image class="medal-img" src="/static/images/icons/icon_medal.png"></image>
    </view>
    <view class="title">
      <view style="color: white; font-size: 25rpx">{{ title1 }}</view>
      <view style="color: white; font-size: 25rpx">{{ title2 }}</view>
    </view>
    <image class="btn" :src="picture" mode="aspectFill"></image>
  </view>
</template>

<script setup>
const props = defineProps({
  title1: { type: String, required: true },
  title2: { type: String, required: true },
  picture: { type: String, required: true },
  active: { type: Boolean, default: false },
})
</script>

<style scoped lang="scss">
.entire {
  width: 160rpx;
  height: 250rpx;
  border-style: solid;
  border-width: 8rpx;
  border-color: rgba(255, 255, 255, 0);
  position: relative;
  .medal {
    position: absolute;
    top: -5rpx;
    right: 10rpx;
    .medal-img {
      width: 21rpx;
      height: 34rpx;
    }
  }
  .title {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 160rpx;
    min-height: 60rpx;
    background: rgb(79, 153, 201);
    background: linear-gradient(
      90deg,
      rgba(79, 153, 201, 1) 0%,
      rgba(70, 96, 122, 1) 50%,
      rgba(79, 153, 201, 1) 100%
    );
  }
  .btn {
    width: 160rpx;
    height: 180rpx;
  }
}
.entire-a {
  border-style: solid;
  border-width: 8rpx;
  border-color: rgb(241, 207, 99);
}
</style>
